window.addEventListener('DOMContentLoaded', function () {
    var music = document.getElementById('music');
    var audio = document.querySelector('audio');
    console.log(audio);
    var page1 = document.getElementById('page1');
    var page2 = document.getElementById('page2');
    var page3 = document.getElementById('page3');

    if (audio.paused) {
        console.log('b');
        music.style.animationPlayState = 'paused';
    } else {
        console.log('c');
        music.style.animationPlayState = 'running';
    }
    page1.addEventListener('touchstart', function () {
        if (audio.paused) {
            audio.play();
            console.log('a');
            music.classList.add('play');
            music.style.animationPlayState = 'running';
        } else {
            audio.pause();
            music.style.animationPlayState = 'paused';
        }
    })
    setTimeout(() => {
        page1.classList.add('up');
      }, 5000);
    var gift = document.getElementById('gift');
    console.log(gift);
    gift.addEventListener('touchstart',function(){
        page2.style.display = 'none';
        page3.style.display = 'block';
    })
})